<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    /**
     * js语句和js表达式的区别：
     * 
     * 1. js语句没有值：if else  for while  var a= 1; switch...case
     * 2. js表达式都是有值的，可以存储在变量中，也可以输出
     *    2-1. 常量、变量
     *         基本数据类型： string number boolean  null undefined
     *         引用数据类型： object array function(){}
     *    2-2. 三元运算符
     *    2-3. 逻辑运算
     *    2-4. 函数调用
     * 
     * 
     * 插值表达式，是用来在jsx中进行变量解析及逻辑渲染及循环渲染的
     * 
     * 插值表达式的语法： {js表达式}
     * 
     * 1. 特殊值：什么都不渲染的  false、true、null、undefined
     * 2. 数组：将数组中每一个元素遍历出来，挨个显示
     * 3. 对象：报错 objects are not valid as a React child 什么也不渲染
     * 4. 函数：报错 functions are not valid as a React child. 什么也不渲染
     * 
     */
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    let num = 888;
    let isLogin = num === 888 ? '登录' : '未登录'
    function fn(){
        return 'abc';
    }
    root.render((
        <div>
            {/*1. 基本数据类型*/}
            {// 我也相当注释
            }
            <span>{'abc'}</span>
            <span>{123}</span>
            <span>{true}</span>
            <span>{false}</span>
            <span>{null}</span>
            <span>{undefined}</span>
            <span>{num}</span>
            {/*2. 引用数据类型*/}
            <span>{[1, 2, 3, 4]}</span>
            {/*<span>{{username:'yuonly',age:10}}</span> */}
            {/*<span>{function(){var a = 1;}}</span>*/}
            {/*3.三元运算符 */}
            <span>{true ? 'abc' : 'zyx'}</span>
            <span>{isLogin}</span>
            {/* 4. 逻辑运算*/}
            <span>{55 && 88}</span>
            <span>{90 || 0}</span>
            {/*5. 函数调用 */}
            <span>{fn()}</span>
        </div>
    ))
</script>

</html>